<template>
  <div class="detail">
    <router-header title="请假申请"></router-header>
    <el-radio-group v-model="tab" size="mini" style="margin-bottom: 15px">
      <el-radio-button label="表单信息"></el-radio-button>
      <el-radio-button label="流程图"></el-radio-button>
      <el-radio-button label="审批记录"></el-radio-button>
    </el-radio-group>
    <div v-show="tab === '表单信息'">
      <el-form ref="info" :model="info" label-width="100px">
        <el-form-item label="请假类型：">{{
          info.leaveTypeDictMap && info.leaveTypeDictMap.name
        }}</el-form-item>
        <el-form-item label="开始时间：">{{
          info.leaveBeginTime
        }}</el-form-item>
        <el-form-item label="结束时间：">{{ info.leaveEndTime }}</el-form-item>
        <el-form-item label="请假天数：">{{ info.leaveDate }}</el-form-item>
        <el-form-item label="请假原因：">{{ info.leaveReason }}</el-form-item>
        <el-form-item label="附件：">
          <!-- <el-image v-for="item in fileList"
            :preview-src-list="(fileList || []).map(imgItem => imgItem.url)"
            class="table-cell-image" :key="item.url" :src="item.url" fit="fill"></el-image> -->
          <template>
            <el-image
              v-for="item in imgList"
              :preview-src-list="(imgList || []).map((imgItem) => imgItem.url)"
              class="table-cell-image"
              :key="item.url1"
              :src="item.url"
              fit="fill"
            >
            </el-image>
            <br />
          </template>
          <a
            style="text-decoration: none"
            v-for="item in fileList"
            :key="item.url"
            href="javascript:void(0);"
            @click="downloadFile(item.url, item.filename)"
          >
            {{ item.name }}<br />
          </a>
        </el-form-item>
      </el-form>
    </div>
    <div v-show="tab === '流程图'">
      <ProcessViewer
        :style="{ height: getMainContextHeight - 148 + 'px' }"
        :xml="entryXml"
        :finishedInfo="finishedInfo"
        :allCommentList="tableList"
      />
    </div>
    <div v-show="tab === '审批记录'">
      <el-table
        size="mini"
        header-cell-class-name="table-header-gray"
        ref="tableImpl"
        :data="tableList"
      >
        <el-table-column
          label="序号"
          header-align="center"
          align="center"
          type="index"
          width="55px"
        />
        <el-table-column label="流程环节" prop="taskName" />
        <el-table-column label="执行人" prop="createUsername"></el-table-column>
        <el-table-column label="操作" prop="approvalType">
          <!-- <template slot-scope="{ row }">
            {{ row.masterData.leaveBeginTime }}
          </template> -->
        </el-table-column>
        <el-table-column label="审批意见" prop="comment"></el-table-column>
        <el-table-column label="处理时间" width="180px" prop="createTime" />
      </el-table>
    </div>
  </div>
</template>
<script>
import { Leave } from '@/api/approve.js';
import { mapGetters } from 'vuex';
import ProcessViewer from '@/views/workflow/components/ProcessViewer.vue';
import projectConfig from '@/core/config';
import { getToken, objectToQueryString } from '@/utils';

const processDefinitionKey = 'flowLeave';
const datasourceId = '1440945228130291712';

// import { FlowOperationController } from '@/api/flowController.js';
export default {
  props: {
    id: [String, Number],
    processInstanceId: [String, Number]
  },
  data () {
    return {
      info: {},
      tab: '表单信息',
      entryXml: null,
      tableList: [],
      finishedInfo: null,
      fileList: [],
      imgList: []
    };
  },
  components: {
    ProcessViewer
  },
  computed: {
    ...mapGetters(['getMainContextHeight', 'getCurrentMenuId'])
  },
  created () {
    if (this.id) {
      this.getDetail();
    } else {
      this.$router.go(-1);
      return;
    }
    this.getRecords();
    this.getProcessBpmn();
    this.getViewHighlightFlowData();
  },
  methods: {
    // 表单信息
    getDetail () {
      Leave.detail(this, {
        processInstanceId: this.id
      }).then((res) => {
        // console.log('回显的数据', res.data)
        let data = this.info = res.data;
        let token = getToken()
        let arr = []
        // 文件列表
        if (data.leaveFile) {
          arr = JSON.parse(data.leaveFile)
          arr.forEach(item => {
            item.url = `${projectConfig.baseUrl}admin/flow/flowOnlineOperation/download?${objectToQueryString({
              processDefinitionKey: processDefinitionKey,
              processInstanceId: this.processInstanceId,
              datasourceId: datasourceId,
              fieldName: 'leave_file',
              asImage: false,
              dataId: data.id,
              filename: item.filename,
              Authorization: token,
              MenuId: this.getCurrentMenuId
            })}`;
            // item.url = `${projectConfig.baseUrl}admin/flow/flowOnlineOperation/download?id=${res.data.id}&fieldName=picture&asImage=true&filename=${item.filename}&Authorization=${token}&processDefinitionKey=${processDefinitionKey}&datasourceId=${datasourceId}`
          });
          this.fileList = arr
        }

        // 图片列表
        if (data.picture) {
          arr = JSON.parse(data.picture)
          arr.forEach(item => {
            item.url = `${projectConfig.baseUrl}admin/flow/flowOnlineOperation/download?${objectToQueryString({
              processDefinitionKey: processDefinitionKey,
              processInstanceId: this.processInstanceId,
              datasourceId: datasourceId,
              fieldName: 'picture',
              asImage: true,
              dataId: data.id,
              filename: item.filename,
              Authorization: token,
              MenuId: this.getCurrentMenuId
            })}`;
          });
          this.imgList = arr
        }
      });
    },
    // 审批记录
    getRecords () {
      Leave.records(this, {
        processInstanceId: this.$route.query.id
      }).then((res) => {
        this.tableList = res.data;
      });
    },
    // 流程图
    getProcessBpmn () {
      Leave.processBpmn(this, {
        processDefinitionId: this.$route.query.processDefinitionId
      }).then((res) => {
        this.entryXml = res.data;
      });
    },
    // 流程图高亮内容
    getViewHighlightFlowData () {
      Leave.viewHighlightFlowData(this, {
        processInstanceId: this.$route.query.id
      }).then((res) => {
        this.finishedInfo = res.data;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.detail {
  position: relative;
}
.el-form-item {
  margin-bottom: 16px;
}
</style>
